<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">出库管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <div class="div2">添加内部出库</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <!-- 基本信息 -->
    <div class="basic">
      <p class="header">基本信息</p>
      <el-form
        ref="basic"
        :inline="true"
        :model="basic"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="收货人" prop="name">
          <el-input
            v-model="basic.name"
            placeholder="请输入收货人姓名"
          ></el-input>
        </el-form-item>

        <el-form-item label="联系电话" prop="phone">
          <el-input
            v-model="basic.phone"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>

        <el-form-item label="部门选择" prop="orgName">
          <div class="selectTree">
              <treeselect
                :options="optionsTeam"
                v-model="basic.orgName"
                search-nested
                :normalizer="normalizer"
                noResultsText="未找到"
                placeholder="请选择"
              >
              </treeselect>
            </div>
        </el-form-item>

        <el-form-item label="出库类型" prop="type">
          <el-select
            v-model="basic.type"
            placeholder="请选择出库类型"
            filterable
            clearable
          >
            <el-option
              v-for="items in outboundTypes"
              :key="items.id"
              :label="items.deliveryName"
              :value="items.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="地区" required>
          <levelAddr
            class="addressContent"
            :province="basic.province"
            :city="basic.city"
            :area="basic.area"
            @updateprovice="getAddrData"
            @updatecity="getCity"
            @updatearea="getArea"
          ></levelAddr>
        </el-form-item>

        <el-form-item label="详细地址" prop="detail">
          <div class="length">
            <el-input
              v-model="basic.detail"
              placeholder="请输入详细地址"
            ></el-input>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 基本信息 -->
    <!-- 面包屑导航 -->
    <div class="box">
      <el-tabs v-model="activeName" @tab-click="getClickTabList">
        <el-tab-pane label="选择商品" name="1">
          <div class="selectGoods">
            <div class="search">
              <el-form
                ref="address"
                :inline="true"
                :model="goods"
                label-width="100px"
              >
                <el-form-item label="产品名称">
                  <el-input
                    v-model="goods.name"
                    placeholder="请输入产品名称"
                  ></el-input>
                </el-form-item>

                <el-form-item label="产品编号">
                  <el-input
                    v-model="goods.goodsNo"
                    placeholder="请输入产品编号"
                  ></el-input>
                </el-form-item>

                <el-form-item label="选择品牌">
                  <el-select
                    v-model="goods.brand"
                    placeholder="请选择产品品牌"
                    clearable
                  >
                    <el-option
                      v-for="items in brandselect"
                      :key="items.id"
                      :label="items.name"
                      :value="items.id"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="品牌分类">
                  <el-cascader
                    v-model="goods.category"
                    :options="options"
                    :props="{
                      checkStrictly: true,
                      label: 'name',
                      value: 'id',
                      children: 'children',
                    }"
                    clearable
                  >
                  </el-cascader>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="mini" @click="searchGoods"
                    >搜索商品</el-button
                  >
                  <el-button plain size="mini" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>

            <div class="list">
              <vxe-table
                :data="goodsL.list"
                height="500px"
                align="center"
                auto-resize
              >
                <vxe-table-column
                  type="seq"
                  title="序号"
                  width="50"
                ></vxe-table-column>
                <vxe-table-column
                  field="name"
                  title="商品名称"
                  show-overflow
                  min-width="200"
                ></vxe-table-column>
                <vxe-table-column
                  field="goodsNo"
                  title="商品编号"
                  min-width="100"
                ></vxe-table-column>
                <vxe-table-column
                  field="brandName"
                  title="商品品牌"
                  min-width="100"
                ></vxe-table-column>
                <vxe-table-column
                  field="categoryName"
                  title="商品分类"
                  min-width="100"
                ></vxe-table-column>
                <vxe-table-column
                  field="marketPrice"
                  title="商品单价"
                  min-width="100"
                ></vxe-table-column>
                <vxe-table-column
                  field="specification"
                  title="商品规格"
                  min-width="100"
                ></vxe-table-column>
                <vxe-table-column
                  field="stock"
                  title="商品库存"
                  min-width="100"
                ></vxe-table-column>
                <vxe-table-column fixed="right" title="操作" width="120px">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="moreCombination(scope.row, scope.$index)"
                      >添加商品</el-button
                    >
                  </template>
                </vxe-table-column>
              </vxe-table>
            </div>
          </div>
          <div class="page">
            <div class="block" style="padding-right:40px;">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage1"
                :page-sizes="[10, 20, 50, 100, 200]"
                :page-size="pageSizegoods"
                layout="total, sizes, prev, pager, next, jumper"
                :total="goodsL.totalNum"
                prev-text="上一页"
                next-text="下一页"
              >
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="选择赠品" name="3">
          <div class="specify">
            <div class="search">
              <el-form
                ref="address"
                :inline="true"
                :model="goods"
                label-width="100px"
              >
                <el-form-item label="产品名称">
                  <el-input
                    v-model="goods.name"
                    placeholder="请输入产品名称"
                  ></el-input>
                </el-form-item>
                  <el-form-item label="产品编号">
                  <el-input
                    v-model="goods.goodsNo"
                    placeholder="请输入产品编号"
                  ></el-input>
                </el-form-item>
                <el-form-item label="选择品牌">
                  <el-select
                    v-model="goods.brand"
                    placeholder="请选择产品品牌"
                    clearable
                  >
                    <el-option
                      v-for="items in brandselect"
                      :key="items.id"
                      :label="items.name"
                      :value="items.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="品牌分类">
                  <el-cascader
                    v-model="goods.category"
                    :options="options"
                    :props="{
                      checkStrictly: true,
                      label: 'name',
                      value: 'id',
                      children: 'children',
                    }"
                    clearable
                  >
                  </el-cascader>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="mini" @click="searhgift()"
                    >搜索赠品</el-button
                  >
                  <el-button size="mini" @click="reset()">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="list">
              <vxe-table
                :data="giftL.list"
                height="500px"
                auto-resize
                align="center"
              >
                <vxe-table-column
                  type="seq"
                  title="序号"
                  width="100"
                ></vxe-table-column>
                <vxe-table-column
                  field="name"
                  title="赠品名称"
                  min-width="300"
                  show-overflow
                ></vxe-table-column>
                <vxe-table-column
                  field="goodsNo"
                  title="赠品编号"
                  min-width="120"
                ></vxe-table-column>
                <vxe-table-column
                  field="brandName"
                  title="赠品品牌"
                  min-width="120"
                ></vxe-table-column>
                <vxe-table-column
                  field="categoryName"
                  title="赠品分类"
                  min-width="120"
                ></vxe-table-column>
                <vxe-table-column
                  field="marketPrice"
                  title="赠品单价"
                  min-width="120"
                >
                <template slot-scope="props">
                  <p>
                    {{'￥'+ props.row.marketPrice}}
                  </p>
               </template>
                </vxe-table-column>
                <vxe-table-column
                  field="specification"
                  title="赠品规格"
                  min-width="120"
                ></vxe-table-column>
                <vxe-table-column
                  field="stock"
                  title="赠品库存"
                  min-width="120"
                ></vxe-table-column>
                <vxe-table-column fixed="right" title="操作" min-width="120px">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="moreCombination(scope.row, scope.$index)"
                      >添加赠品</el-button
                    >
                  </template>
                </vxe-table-column>
              </vxe-table>
            </div>
          </div>

          <div class="page">
            <div class="block" style="padding-right: 40px;">
              <el-pagination
                @size-change="handleSizeChangeZp"
                @current-change="handleChangeZp"
                :current-page="currentPage1"
                :page-sizes="[10, 20, 50, 100, 200]"
                :page-size="pageSizegoods"
                layout="total, sizes, prev, pager, next, jumper"
                :total="giftL.totalNum"
              >
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="orderBox">
      <div class="order">
        <p class="header" style="background: #fff; padding: 10px">订单商品</p>
        <el-table :data="orderDetailList" style="width: 100%">
          <el-table-column label="商品名称">
            <template slot-scope="scope">
              <div style="display:flex">{{ scope.row.title || scope.row.name }}<span class="gift" v-if="scope.row.goodsType=='赠品'" >赠品</span></div>
            </template>
          </el-table-column>
          <el-table-column label="商品数量">
            <!-- <template slot-scope="scope">
              <div class="numer">
                <el-input
                  v-model="scope.row.quantity"
                  :value="scope.row.quantity"
                  @change="changeCount(scope.row, scope.$index)"
                  :min="1"
                  :max="scope.row.quantity"
                >
                  <el-button
                    slot="prepend"
                    @click="changeQuantity(scope.row, -1, scope.$index)"
                    ><i class="el-icon-minus"></i
                  ></el-button>
                  <el-button
                    slot="append"
                    @click="changeQuantity(scope.row, 1, scope.$index)"
                    ><i class="el-icon-plus"></i
                  ></el-button>
                </el-input>
              </div>
            </template> -->
           <template slot-scope="scope">
              <p style="text-align: center" class="table-price">
                <el-input-number size="mini" v-model="scope.row.quantity" :min="1" label="描述文字"></el-input-number>
              </p>
            </template>
          </el-table-column>
          <el-table-column label="商品单价">
            <template slot-scope="scope">
              <div class="sellPrice">
                <el-input
                  v-model="scope.row.retailPrice"
                  :value="scope.row.retailPrice"
                  @change="changePrice(scope.row, scope.$index)"
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品品牌">
            <template slot-scope="scope">
              <span v-if="scope.row.brandName">{{ scope.row.brandName }}</span>
              <span v-else> / </span>
            </template>
          </el-table-column>
          <el-table-column label="商品分类">
            <template slot-scope="scope">
              <span v-if="scope.row.categoryName">{{ scope.row.categoryName }}</span>
              <span v-else> / </span>
            </template>
          </el-table-column>
          <el-table-column
            label="商品规格"
          >
          <template slot-scope="scope">
            <p v-if="scope.row.specTitle" v-html="scope.row.specTitle"></p>
          <p v-else v-html="scope.row.specification"></p>
            </template>
          </el-table-column>
          <el-table-column prop="total" label="商品小计" >
            <template slot-scope="scope">
              <p>{{ parseFloat(scope.row.quantity * scope.row.retailPrice).toFixed(2) }}</p>
            </template>
          </el-table-column>
          <el-table-column min-width="50px" fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="delectSelect(scope.$index)"
                >删除商品</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 赠品列表 -->
        <!-- <el-table :data="tableZp" style="width: 100%">
          <el-table-column label="赠品名称">
            <template slot-scope="scope">
              <p>{{ scope.row.title }}</p>
            </template>
          </el-table-column>
          <el-table-column label="赠品数量">
            <template slot-scope="scope">
              <div class="numer">
                <el-input
                  v-model="scope.row.number"
                  :value="scope.row.number"
                  @change="changeCountZp(scope.row, scope.$index)"
                  :min="1"
                  :max="scope.row.number"
                >
                  <el-button
                    slot="prepend"
                    @click="changeQuantityZp(scope.row, -1, scope.$index)"
                    ><i class="el-icon-minus"></i
                  ></el-button>
                  <el-button
                    slot="append"
                    @click="changeQuantityZp(scope.row, 1, scope.$index)"
                    ><i class="el-icon-plus"></i
                  ></el-button>
                </el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="赠品单价">
            <template slot-scope="scope">
              <div class="sellPrice">
                <el-input
                  v-model="scope.row.sellPrice"
                  :value="scope.row.sellPrice"
                  @change="changePriceZp(scope.row, scope.$index)"
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="赠品品牌" prop="brandId"></el-table-column>
          <el-table-column label="赠品分类" prop="categoryId"></el-table-column>
          <el-table-column
            prop="specificationName"
            label="赠品规格"
          ></el-table-column>
          <el-table-column prop="total" label="赠品小计"></el-table-column>
          <el-table-column min-width="50px" fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="delectSelect(scope.$index)"
                >删除赠品</el-button
              >
            </template>
          </el-table-column>
        </el-table> -->
        <div class="page1">
          <p>
            <span>总计：共 {{ totalNumber }} 件 </span>
          </p>
          <p>
            <span>总价:</span>
            <el-input size="mini" v-model="totalPrice" placeholder=""></el-input>
          </p>
          <p>
            <span>已收款:</span>
            <!-- <el-input size="mini" v-model="receivedMoney" placeholder=""></el-input> -->
            <el-input-number :controls="false" @blur="handlerReceivedMoney" style="width:120px" :precision="2"
                               size="mini" v-model.trim="receivedMoney" placeholder=""></el-input-number>
          </p>
          <!-- <p>
            <span style="color: #999">原总价：{{ origTotal }}</span>
          </p> -->
          <p>
            <el-button type="primary" @click="toReviewOrder('basic')"
              >确定订单</el-button
            >
          </p>
        </div>
      </div>
    </div>
    <!-- 订单备注 -->
    <div class="orderNotes">
      <div class="header">
        <span>订单备注</span>
      </div>
      <div class="notes">
        <el-input
          type="textarea"
          v-model="basic.textarea"
          placeholder="备注"
        ></el-input>
      </div>
    </div>
    <el-dialog :title="dialog.title" :visible.sync="dialog.visible" append-to-body :width="dialog.width"  :close-on-click-modal="false">
        <template >
          <div v-for="(item,index) in specList " :key="index" class="skuBox">
            <div class='title'>{{ item.name }}</div>
            <div class='spec'>
              <div class='spec-item' v-for="(its,ins) in item.specItemList" :key="its.content + ins">
                <span @click="changeSpec(item.name, its.content)"
                      :class="[selectSpec[item.name] == its.content ? 'active' : '']">{{ its.content }}</span>
              </div>
            </div>
          </div>
          <div class="specificationBox">
            <p class="specificationBox_title">
              <span class="specificationBox_title_item">已选规格：</span><span class="specificationBox_title_right"><b
                v-if="matchingStr == ''">未选择</b><b v-else v-html="matchingStr"></b></span>
            </p>
            <div class="specificationBox_border">
              <div class="specificationBox_border_item">
                <span class="item">市场价</span> <span class="item">零售价</span> <span class="item">销量</span> <span
                  class="item">库存</span>
              </div>
              <div class="specificationBox_border_money">
                <span class="item">{{ matching.marketPrice ? '￥' + matching.marketPrice : '-' }}</span>
                <span class="item">{{ matching.retailPrice ? '￥' + matching.retailPrice : '-' }}</span>
                <span class="item">{{ matching.soldNum || matching.soldNum === 0 ? matching.soldNum : '-' }}</span>
                <span class="item">{{ matching.stock ? matching.stock : '-' }}</span>
              </div>
            </div>
          </div>
          <div class="dialogBtnright" style="margin-top:20px" >
            <el-button class="setPay_payment_btn_quxiao" @click="handledeleteClose">取 消</el-button>
            <el-button class="setPay_payment_btn_queren" type="primary" @click="addSelectList">确 定</el-button>
          </div>
        </template>
      </el-dialog>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import levelAddr from '@/components/levelAddr'
export default {
  components: {
    levelAddr,
    Treeselect
  },
  data () {
    return {
      receivedMoney: 0, // 实收金额
      currentRow: {},
      matchingStr: '',
      matching: {}, // 匹配 SKU
      specList: [],
      skuList: [],
      orderDetailList: [], // 已选择商品
      selectSpec: {}, // 选择数据的对象 将已选的数据放在这个对象里面记录下来  用对象的好处在下面深拷贝处就能体验到了
      dialog: { visible: false, title: '', width: '', type: '' },
      pickerOptions: {
        shortcuts: [
          {
            text: '此刻',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          }
        ],
        disabledDate (time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },
      basic: {
        name: '',
        phone: '',
        orgName: null,
        type: '',
        province: '',
        city: '',
        area: '',
        detail: '',
        textarea: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入申请人姓名',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入申请人联系电话',
            trigger: 'blur'
          },
          {
            min: 11,
            message: '联系电话必须达到11位',
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: true,
            message: '请选择出库类型',
            trigger: 'change'
          }
        ],
        detail: [
          {
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
          }
        ],
        orgName: [
          {
            required: true,
            message: '请选择部门',
            trigger: 'change'
          }
        ]
      },
      goods: {
        name: '',
        brand: '',
        category: [],
        goodsNo: ''
      },
      activeName: '1',
      total: 0,
      tableData: [],
      currentPage1: 1,
      pageSizegoods: 10,
      id: '',
      brandselect: [],
      options: [],
      optionsTeam: [],
      props: {
        label: 'orgName',
        value: 'id',
        children: 'children'
      },
      addressId: '',
      goodsL: [],
      giftL: [],
      orderNumber: 0,
      origTotal: 0, // 原价
      arry: [],
      arrayZp: [],
      tableZp: [],
      outboundTypes: []
    }
  },
  created () {
    this.department()
    this.outboundType()
    this.brandSelectBox()
    this.brandSelect()
    // this.getDefaultAddress();
    this.goodsList()
    this.giftList()
    if (this.$route.query.orderId) {
      this.axios.get('order/v1/internal/interiorOrder/interiorOrderDetails?orderId=' + this.$route.query.orderId).then(res => {
        if (res.code == 0) {
          console.log(res, 'res555555555555555')
          res.data.interiorOrderCommodities.forEach((item) => {
            item.categoryName = item.classifyName
            item.goodsId = item.commodityId
            item.name = item.commodityName
            item.quantity = item.number
            item.retailPrice = item.price
            item.specification = item.specificationName
            item.barnd = item.brandName
          })
          this.orderDetailList = res.data.interiorOrderCommodities
          // res.data.interiorOrderCommodities.forEach(i => {
          //   this.arry.push(i.commodityId)
          //   this.tableData.push({
          //     createdTime: i.createdTime,
          //     commodityId: i.commodityId,
          //     number: i.number,
          //     sellPrice: i.price,
          //     specificationId: i.specificationId,
          //     specificationName: i.specificationName,
          //     title: i.commodityName,
          //     total: i.number * parseInt(i.price),
          //     brandId: i.brandName,
          //     typeId: i.classifyName
          //   })
          // })
          // res.data.interiorOrderComplimentaries.forEach(i => {
          //   this.arrayZp.push(i.complimentaryId)
          //   this.tableZp.push({
          //     createdTime: i.createdTime,
          //     complimentaryId: i.complimentaryId,
          //     number: i.number,
          //     sellPrice: i.price,
          //     specificationId: i.specificationId,
          //     specificationName: i.specificationName,
          //     title: i.complimentaryName,
          //     total: i.number * parseInt(i.price),
          //     brandId: i.classifyName,
          //     categoryId: i.brandName
          //   })
          // })

          this.basic = {
            name: res.data.consignee,
            phone: res.data.receivingPhone,
            orgName: res.data.orgCode,
            type: Number(res.data.typeId),
            province: res.data.province,
            city: res.data.city,
            area: res.data.region,
            detail: res.data.addressDetails
          }

          this.countM()
        }
      })
    }
  },
  computed: {
    // 应付价格
    dealWith: {
      get () {
        let dealWithTwo = 0
        for (const item of this.orderDetailList) {
          // console.log(item, 'item')
          dealWithTwo += item.quantity * Number(item.retailPrice)
        }
        return dealWithTwo
      },
      set (newValue) {
        this.dealWith = newValue
      }
    },
    // 商品总价格
    totalPrice () {
      let totalPrice = 0
      for (const item of this.orderDetailList) {
        totalPrice += item.quantity * Number(item.retailPrice)
      }
      return totalPrice
    },
    totalNumber () {
      let totalNumber = 0
      for (const item of this.orderDetailList) {
        totalNumber += item.quantity
      }
      return totalNumber
    }
  },
  methods: {
    // 已收价格输入框失去焦点方法
    handlerReceivedMoney () {
      if (this.receivedMoney && this.receivedMoney > this.totalPrice) {
        this.receivedMoney = this.totalPrice
      }
    },
    // 点击多规格组合弹框内容
    moreCombination (row) {
      console.log(row, 'row')
      this.currentRow = row
      this.matchingStr = ''
      this.matching = {}
      this.moreSpecification = row// 吧row保存下来 用于给弹框点击确定的时候执行添加方法
      this.selectSpec = {}

      row.skuList.map((it) => {
        it.skuArr = []
        it.skuArr.push(it.firstGoodsSpecItemContent)
        it.skuArr.push(it.secondGoodsSpecItemContent)
        it.skuArr.push(it.thirdGoodsSpecItemContent)
        it.skuArr = it.skuArr.filter(Boolean)
      })
      row.goodsSpecList.forEach(item => {
        this.$set(this.selectSpec, item.name, '')
      })
      this.skuList = row.skuList
      row.goodsSpecList.map(item => {
        item.specItemList.map(its => {
          its.able = this.isAble(item.name, its.content) // 注释的调试看逻辑代码 false
          //  判断是否可以选择
          //  这里相当于init 初始化数据  this.isAble() 核心判断逻辑
        })
      })
      this.specList = row.goodsSpecList
      if (row.skuList.length === 1) {
        this.addSelectList('only')
        return console.log('直接添加')
      }
      this.dialog.visible = true
      this.dialog.title = '选择规格'
      this.dialog.type = 'moreSpecification'
      this.dialog.width = '650px'
    },
    addSelectList (sku) {
      console.log(this.$route.query.type, 'this.$route.query.type')
      // debugger
      // const tempObj = Object.assign(this.currentRow, this.matching)
      let isOnly = false
      if (sku === 'only') {
        isOnly = true
      } else {
        isOnly = false
      }
      const currentRow = this.currentRow
      const matching = isOnly ? currentRow : this.matching
      console.log(this.matching, 'this.matching')
      console.log(this.currentRow, 'this.currentRow')
      if (JSON.stringify(matching) === '{}') { return this.$message.warning(`请选择规格！`) }
      // debugger
      const tempObj = {
        goodsId: currentRow.id,
        name: currentRow.name,
        goodsType: currentRow.goodsType,
        goodsNo: currentRow.goodsNo,
        goodsSkuId: isOnly ? currentRow.skuList[0].id : matching.goodsSkuId,
        specTitle: isOnly ? `${currentRow.goodsSpecList[0].name} ${currentRow.goodsSpecList[0].specItemList[0].content}` : matching.specTitle,
        marketPrice: isOnly ? currentRow.skuList[0].marketPrice : matching.marketPrice,
        totalMarketPrice: isOnly ? currentRow.skuList[0].marketPrice : matching.marketPrice,
        retailPrice: isOnly ? currentRow.skuList[0].retailPrice : matching.retailPrice,
        totalRetailPrice: isOnly ? currentRow.skuList[0].retailPrice : matching.retailPrice,
        mainImageArr: [],
        quantity: 1,
        discountAmount: 0.00,
        brandName: currentRow.brandName, // 品牌
        categoryName: currentRow.categoryName, // 类名
        specification: currentRow.specification // 规格
      }
      if (this.$route.query.type === 1) {
        tempObj.barnd = currentRow.brandName
        tempObj.categoryName = currentRow.categoryName
      }
      tempObj.mainImageArr.push(currentRow.mainImage)
      tempObj.mainImage = currentRow.mainImage
      console.log(tempObj)
      const orderDetailList = this.orderDetailList
      const indexLength = orderDetailList.length
      if (indexLength > 0) {
        let isAdd = false
        for (let i = 0; i < indexLength; i++) {
          if (orderDetailList[i].goodsSkuId === tempObj.goodsSkuId) {
            this.orderDetailList[i].quantity = orderDetailList[i].quantity + 1
            isAdd = true
            break
          }
        }
        if (!isAdd) {
          this.$set(this.orderDetailList, indexLength, tempObj)
        }
      } else {
        this.$set(this.orderDetailList, indexLength, tempObj)
        // this.orderDetailList.unshift(tempObj)
      }
      // this.orderDetailList.push(tempObj)
      this.dialog.visible = false
      this.orderDetailList = this.orderDetailList.sort((star, next) => {
        const order = ['普通商品', '赠品']
        return order.indexOf(star.goodsType) - order.indexOf(next.goodsType)
      }
      )
      console.log(this.orderDetailList, 'this.orderDetailList')
      this.$message.success('添加商品成功！')
    },
    isAble (key, value) {
      // 深拷贝 避免被影响
      var copySelectSpec = JSON.parse(JSON.stringify(this.selectSpec))
      // 用对象的好处就在这了 直接赋值当前验证项
      copySelectSpec[key] = value
      // 用数组的 some 方法 效率高 符合条件直接退出循环
      const flag = this.skuList.some(item => {
        // 条件判断 核心逻辑判断
        // console.log(item)
        var i = 0
        // 这个for in 循环的逻辑就对底子不深的人来说就看不懂了 原理就是循环已经选中的 和 正在当前对比的数据 和 所有的sku对比 只有当前验证的所有项满足sku中的规格或者其他规格为空时 即满足条件 稍微有点复杂 把注释的调试代码打开就调试下就可以看懂了
        for (const k in copySelectSpec) {
          // 注释的调试看逻辑代码
          if (copySelectSpec[k] != '' && item.skuArr.includes(copySelectSpec[k])) {
            i++
          } else if (copySelectSpec[k] == '') {
            i++
          }
        }
        // 符合下面条件就退出了 不符合会一直循环知道循环结束没有符合的条件就 return false 了
        return i == this.specList.length
      })
      return flag
    },
    // 点击事件
    changeSpec (key, value) {
      if (this.selectSpec[key] === value) {
        this.selectSpec[key] = ''
      } else {
        this.selectSpec[key] = value
      }
      this.specList.forEach(item => {
        item.specItemList.forEach(its => {
          its.able = this.isAble(item.name, its.content)
        })
      })
      // str.split('')
      // this.matchingStr.push(`${key}/${value}`)
      console.log(`${key}/${value}`)
      console.log(this.selectSpec)
      console.log(this.specList)
      // console.log(this.skuList)
      const selectSpec = this.selectSpec
      const selectSpecValue = []
      for (const key in this.selectSpec) {
        if (selectSpec[key]) { selectSpecValue.push(selectSpec[key]) }
      }
      // selectSpecValue = selectSpecValue.reverse()
      const tempSkuList = this.skuList
      let tempStr = ''
      for (let i = 0; i < tempSkuList.length; i++) {
        const isArrmatching = this.isArrEqual(tempSkuList[i].skuArr, selectSpecValue)
        if (isArrmatching) {
          this.matching = tempSkuList[i]
          this.matching.goodsSkuId = tempSkuList[i].id
          this.matching.discountAmount = '0.00'
          for (const key in this.selectSpec) {
            tempStr += key + '/' + this.selectSpec[key] + '&ensp;'
          }
          this.matchingStr = tempStr
          this.matching.specTitle = tempStr
          // this.matching.quantity = 1
          this.matching.mainImageArr = []
          this.matching.mainImageArr.push(this.currentRow.mainImage)
          this.matching.mainImage = this.currentRow.mainImage
          break
          // throw new Error('LoopInterrupt')
        } else {
          this.matching = {}
          this.matchingStr = ''
        }
      }
    },
    isArrEqual (arr1, arr2) {
      // 判断一个数组是否包含一个指定的值
      return arr1.length === arr2.length && arr1.every((ele) => arr2.includes(ele))
    },
    // 删除
    delectSelect (index) {
      const goodsName = this.orderDetailList[index].name
      this.orderDetailList.splice(index, 1)
      this.$message.warning(`商品${goodsName}被移除！`)
      // this.arry.splice(index, 1)
      // this.calculation()
    },
    // 关闭弹框
    handledeleteClose () {
      this.dialog.visible = false
    },

    getClickTabList (tab) {
      console.log(tab.name, 'tab')
      if (tab.name == 1) {
        this.goodsList()
      } else {
        this.giftList()
      }
    },
    normalizer (node) {
      return {
        id: node.orgCode,
        label: node.orgName,
        children: node.children
      }
    },
    delectRowZp (index) {
      this.tableZp.splice(index, 1)
      this.calculation()
    },
    is_null (content) {
      if (
        content + '' != '' &&
        content + '' != 'undefined' &&
        content + '' != 'null' &&
        content + '' != '请选择'
      ) {
        return false
      } else {
        return true
      }
    },
    getAddrData (val) {
      this.basic.province = val
      this.basic.city = ''
      this.basic.area = ''
    },
    getCity (val) {
      this.basic.city = val
      this.basic.area = ''
    },
    getArea (val) {
      this.basic.area = val
    },
    search () {
      this.currentPage1 = 1
      this.pageSizegoods = 10
      this.goodsList()
    },
    // 部门选择列表
    department () {
      this.axios
        .post(
          '/sys/v1/org/tree/select',
          {
            request: {
              orgName: '',
              orgType: ''
            },
            version: ''
          },
          {
            headers: {
              isLoading: false
            }
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.optionsTeam = res.data
          } else {
            this.$message.error(res.message)
          }
        })
    },
    reset () {
      this.goods = {
        name: '',
        brand: '',
        category: [],
        code: ''
      }
      this.currentPage1 = 1
      this.pageSizegoods = 10
      this.goodsList()
    },
    handleChangeZp (val) {
      this.currentPageZp = val
      this.giftList()
    },
    searchGoods () {
      this.currentPage1 = 1
      this.pageSizegoods = 10
      this.goodsList()
    },
    searhgift () {
      this.currentPageZp = 1
      this.pageSizeZp = 10
      this.giftList()
    },
    handleSizeChangeZp (val) {
      this.pageSizeZp = val
      this.giftList()
    },
    goodsList () {
      this.axios
        .post('/goods/goods/placeGoodsPageList', {
          brandId: this.goods.brand,
          name: this.goods.name,
          goodsNo: this.goods.goodsNo,
          dictId: JSON.parse(sessionStorage.getItem('salesAuthorityId')),
          typeId: this.goods.category[this.goods.category.length - 1],
          pageNo: this.currentPage1,
          pageSize: this.pageSizegoods,
          goodsType: 1,
          status: 0,
          title: this.goods.name,
          type: 1,
          isGift: false
        })
        .then((res) => {
          if (res.code == 0) {
            res.data.list.forEach((item) => {
              if (item.goodsSpecList) {
                let tempSpec = ''
                item.goodsSpecList.forEach((itemb) => {
                  tempSpec += `${itemb.name}(${itemb.specItemList.length}) 、`
                })
                item.specification = tempSpec
                if (item.specification.length > 0) {
                  item.specification = item.specification.substring(0, item.specification.length - 1)
                }
              }
              item.marketPrice = Number(item.marketPrice)
              item.stock = Number(item.stock)
            })
            this.goodsL = res.data
          } else {
            this.$message.error(res.message)
          }
        })
    },
    giftList () {
      this.axios
        .post('/goods/goods/placeGoodsPageList', {
          brandId: this.goods.brand,
          name: this.goods.name,
          goodsNo: this.goods.goodsNo,
          dictId: JSON.parse(sessionStorage.getItem('salesAuthorityId')),
          categoryId: this.goods.category[this.goods.category.length - 1],
          pageNo: this.currentPageZp,
          pageSize: this.pageSizeZp,
          status: 0,
          goodsType: 3,
          title: this.goods.name,
          code: this.goods.code,
          type: 0,
          isGift: true
        })
        .then((res) => {
          // console.log('赠品商品')
          // console.log(res);
          if (res.code == 0) {
            res.data.list.forEach((item) => {
              if (item.goodsSpecList) {
                let tempSpec = ''
                item.goodsSpecList.forEach((itemb) => {
                  tempSpec += `${itemb.name}(${itemb.specItemList.length}) 、`
                })
                item.specification = tempSpec
                if (item.specification.length > 0) {
                  item.specification = item.specification.substring(0, item.specification.length - 1)
                }
              }
              item.marketPrice = Number(item.marketPrice)
              item.stock = Number(item.stock)
            })
            this.giftL = res.data
          } else {
            this.$message.error(res.message)
          }
        })
    },
    // 添加商品、赠品
    addOrder (row) {
      console.log(row, 'row')
      const rows = {
        // 初始化默认状态
        createdTime: row.createdTime,
        commodityId: row.id, // 商品id
        number: 1, // 数量
        sellPrice: row.marketPrice, // 单价
        specificationId: row.specificationId, // 规格id
        specificationName: row.specification, // 规格
        title: row.name, // 商品名称
        total: 1 * parseInt(row.marketPrice), // 单价*数量
        brandId: row.brandName, // 品牌
        typeId: row.categoryName
      }
      // 判断商品是否重复
      if (this.tableData.length != 0) {
        if (this.arry.indexOf(row.commodityId ? row.commodityId : row.id) != -1) {
          let setNum = 0
          let indexTab = 0
          // 获取需要改变数量得值
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].commodityId == row.id) {
              setNum = parseInt(this.tableData[i].number) + 1
              indexTab = i
            }
          }
          // 获取需要改变数量得值
          this.$set(this.tableData, indexTab, {
            createdTime: row.createdTime,
            commodityId: row.id,
            number: setNum,
            sellPrice: row.marketPrice,
            specificationId: row.specificationId,
            specificationName: row.specification,
            title: row.name,
            total: setNum * parseInt(row.marketPrice),
            brandId: row.brandName,
            typeId: row.categoryName
          })
        } else {
          this.arry = []
          console.log(rows)
          this.tableData.push(rows)
          // 不相同则需要插入id
          for (let i = 0; i < this.tableData.length; i++) {
            this.arry.push(this.tableData[i].commodityId ? this.tableData[i].commodityId : this.tableData[i].id)
          }
          // 不相同则需要插入id
        }
      } else {
        // tableData为空的时候
        // console.log("tableData为空的时候")
        this.arry = [] // 初始化一次再push
        console.log(rows)
        this.tableData.push(rows)
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].total =
            this.tableData[i].number * this.tableData[i].sellPrice
          this.arry.push(this.tableData[i].commodityId ? this.tableData[i].commodityId : this.tableData[i].id) // 需要集合商品id
        }
      }
      // 判断商品是否重复
      this.countM()
    },
    countM () {
      let numb = 0
      let price = 0
      // 赠品数量
      let zpNum = 0
      let zpPrice = 0
      for (let i = 0; i < this.tableZp.length; i++) {
        zpNum += Number(this.tableZp[i].number)
        zpPrice += Number(this.tableZp[i].total)
      }
      for (let i = 0; i < this.tableData.length; i++) {
        numb += Number(this.tableData[i].number)
        price += Number(this.tableData[i].total)
      }
      this.orderNumber = Number(numb) + Number(zpNum)
      this.origTotal = price + zpPrice
      this.total = this.origTotal
      this.giftPrice = zpPrice.toFixed(2)
    },
    addOderZp (row) {
      // console.log(row);
      const rows = {
        // 初始化默认状态
        createdTime: row.createdTime,
        complimentaryId: row.id,
        number: 1,
        sellPrice: row.marketPrice,
        specificationId: row.specificationId,
        specificationName: row.specification,
        title: row.name,
        total: 1 * parseInt(row.marketPrice),
        brandId: row.brandName,
        categoryId: row.categoryName
      }
      // ===
      if (this.tableZp.length != 0) {
        if (this.arrayZp.indexOf(row.id) >= 0) {
          let setNum = 0
          let indexTab = 0
          // 获取需要改变数量得值
          // console.log(this.arrayZp+"----"+row.id)
          for (let i = 0; i < this.tableZp.length; i++) {
            if (this.tableZp[i].complimentaryId == row.id) {
              setNum = parseInt(this.tableZp[i].number) + 1
              indexTab = i
            }
          }
          // 获取需要改变数量得值
          this.$set(this.tableZp, indexTab, {
            createdTime: row.createdTime,
            complimentaryId: row.id,
            number: setNum,
            sellPrice: row.marketPrice,
            specificationId: row.specificationId,
            specificationName: row.specification,
            title: row.name,
            total: setNum * parseInt(row.marketPrice),
            brandId: row.brandName,
            categoryId: row.categoryName
          })
        } else {
          this.arrayZp = [] // 初始化一次再push
          // console.log("tableZp不相同")
          console.log(rows)
          this.tableZp.push(rows)
          // 不相同则需要插入id
          for (let i = 0; i < this.tableZp.length; i++) {
            this.arrayZp.push(this.tableZp[i].complimentaryId ? this.tableZp[i].complimentaryId : this.tableZp[i].id)
          }
          // 不相同则需要插入id
        }
      } else {
        // tableZp为空的时候
        this.arrayZp = [] // 初始化一次再push
        console.log(rows)
        this.tableZp.push(rows)
        for (let i = 0; i < this.tableZp.length; i++) {
          this.tableZp[i].total =
            this.tableZp[i].number * this.tableZp[i].sellPrice
          this.arrayZp.push(this.tableZp[i].complimentaryId ? this.tableZp[i].complimentaryId : this.tableZp[i].id) // 需要集合商品id
        }
      }
      this.countM()
    },
    outboundType () {
      this.axios
        .post(
          'order/v1/internal/delivery/config/list',
          {
            request: {
              deliveryName: '',
              orgCode: sessionStorage.getItem('orgCode'),
              pageNo: 1,
              pageSize: 999
            }
          },
          {
            headers: {
              isLoading: false
            }
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.outboundTypes = res.data.list
          } else {
            this.$message.error(res.message)
          }
        })
    },
    //* * 品牌下拉 **//
    brandSelectBox () {
      this.axios
        .get('/order/comm/commodity/selectList', {
          headers: {
            isLoading: false
          }
        })
        .then((res) => {
          // console.log('分类')
          // console.log(res);
          if (res.code == 0) {
            this.brandselect = res.data
          } else {
            this.$message.error(res.message)
          }
        })
    },
    //* * 品牌下拉 **//
    // 分类下拉框
    brandSelect () {
      this.axios
        .get('/order/comm/commodity/selectBrand', {
          headers: {
            isLoading: false
          }
        })
        .then((res) => {
          if (res.code == 0) {
            this.options = res.data
          } else {
            this.$message.error(res.message)
          }
        })
    },
    // handleCurrentChange(val) {
    // 	this.goodsList(`${val}`);
    // },
    handleCurrentChange (val) {
      this.currentPage1 = val
      this.goodsList()
    },
    handleSizeChange (val) {
      this.pageSizegoods = val
      this.goodsList()
    },
    // 数量文本框值改变
    changeCount (row, index) {
      console.log(row, 'row')
      if (
        row.quantity == null ||
        row.quantity == '' ||
        (row.quantity != 'quantity' && isNaN(row.quantity))
      ) {
        row.quantity = 1
      } else if (row.number <= 1) {
        row.quantity = 1
        this.$message({
          message: '已经减到最低了哦',
          type: 'warning'
        })
      }
      this.$set(this.tableData, index, {
        createdTime: row.createdTime,
        commodityId: row.id ? row.id : row.commodityId,
        number: row.number,
        sellPrice: row.sellPrice,
        specificationName: row.specificationName,
        title: row.title,
        total: parseFloat(row.number * row.sellPrice).toFixed(2),
        brandId: row.brandId,
        typeId: row.typeId
      })
      this.tableData[index].number = row.number
      this.calculation()
    },
    changeCountZp (row, index) {
      if (
        row.number == null ||
        row.number == '' ||
        (row.number != 'number' && isNaN(row.number))
      ) {
        row.number = 1
      } else if (row.number <= 1) {
        row.number = 1
        this.$message({
          message: '已经减到最低了哦',
          type: 'warning'
        })
      }
      this.$set(this.tableZp, index, {
        createdTime: row.createdTime,
        complimentaryId: row.id ? row.id : row.complimentaryId,
        number: row.number,
        sellPrice: row.sellPrice,
        specificationName: row.specificationName,
        title: row.title,
        total: parseFloat(row.number * row.sellPrice).toFixed(2),
        brandId: row.brandId,
        categoryId: row.categoryId
      })
      this.calculation()
    },
    // 加减号
    changeQuantity (row, type, index) {
      console.log(row, 'row')
      if (type > 0) {
        row.quantity++
      } else {
        row.quantity--
        row.quantity > 1 ? row.quantity : (row.quantity = 1)
      }
      // this.changeCount(row,type,index);
      this.calculation()
      this.$set(this.orderDetailList, index, {
        createdTime: row.createdTime,
        goodsId: row.id,
        quantity: row.quantity,
        retailPrice: row.retailPrice,
        specificationName: row.specificationName,
        title: row.title,
        total: parseFloat(row.quantity * row.sellPrice).toFixed(2),
        brandId: row.brandId,
        typeId: row.typeId
      })
      this.tableData[index].number = row.number
      // console.log(this.tableData[index].number+"修改后的数量")
    },
    changeQuantityZp (row, type, index) {
      if (type > 0) {
        row.number++
      } else {
        row.number--
        row.number > 1 ? row.number : (row.number = 1)
      }
      // this.changeCount(row);
      this.calculation()
      // this.tableData.splice(index,1)
      this.$set(this.tableZp, index, {
        createdTime: row.createdTime,
        complimentaryId: row.id ? row.id : row.complimentaryId,
        number: row.number,
        sellPrice: row.sellPrice,
        specificationName: row.specificationName,
        title: row.title,
        total: parseFloat(row.number * row.sellPrice).toFixed(2),
        brandId: row.brandId,
        categoryId: row.categoryId
      })
    },
    /** 修改商品的单价**/
    changePrice (row, index) {
      console.log(row)
      if (
        row.retailPrice == null ||
        row.retailPrice == ''
      ) {
        this.$message.warning('单价输入有问题')
        row.retailPrice = 0
      }
      // else {
      //   this.$set(this.tableData, index, {
      //     createdTime: row.createdTime,
      //     commodityId: row.id ? row.id : row.commodityId,
      //     number: row.number,
      //     sellPrice: row.sellPrice,
      //     specificationName: row.specificationName,
      //     title: row.title,
      //     total: Number(row.number) * Number(row.sellPrice),
      //     brandId: row.brandId,
      //     typeId: row.typeId
      //   })
      //   this.calculation()
      // }
    },
    /** 修改赠品的单价**/
    changePriceZp (row, index) {
      if (!this.is_null(row.sellPrice)) {
        this.$set(this.tableZp, index, {
          createdTime: row.createdTime,
          complimentaryId: row.id ? row.id : row.complimentaryId,
          number: row.number,
          sellPrice: row.sellPrice,
          specificationName: row.specificationName,
          title: row.title,
          total: parseFloat(Number(row.number) * Number(row.sellPrice)).toFixed(
            2
          ),
          brandId: row.brandId,
          categoryId: row.categoryId
        })
      } else {
        this.$message.warning('单价不能为空')
      }
      this.calculation()
    },
    /** 修改商品的单价**/
    // 计算价格--公共调用 总价，总数量
    calculation () {
      let zpNum = 0
      let numb = 0 // 接收商品数量
      let zpPrice = 0
      let price = 0
      for (let i = 0; i < this.tableZp.length; i++) {
        zpNum += Number(this.tableZp[i].number)
        zpPrice += Number(this.tableZp[i].number) * this.tableZp[i].sellPrice
      }
      for (let i = 0; i < this.tableData.length; i++) {
        numb += Number(this.tableData[i].number)
        price += Number(this.tableData[i].number) * this.tableData[i].sellPrice
      }
      this.orderNumber = Number(numb) + Number(zpNum)
      this.origTotal = parseFloat(price + zpPrice).toFixed(2)
      this.total = parseFloat(this.origTotal).toFixed(2)
      this.giftPrice = zpPrice.toFixed(2)
      // this.receivedMoney = price;
    },
    // 删除
    delectRow (index) {
      this.tableData.splice(index, 1)
      this.arry.splice(index, 1)
      this.calculation()
    },
    toReviewOrder (basic) {
      this.$refs[basic].validate((valid) => {
        if (valid) {
          if (this.basic.province && this.basic.city && this.basic.area) {
            if (this.is_null(this.orderDetailList)) {
              this.$message.warning('未选择下单商品')
            } else {
              sessionStorage.setItem('internalex', JSON.stringify(this.basic))
              sessionStorage.setItem('orderDetailList', JSON.stringify(this.orderDetailList))
              // sessionStorage.setItem('tableZp', JSON.stringify(this.tableZp))
              if (this.receivedMoney && this.receivedMoney > 0 || this.receivedMoney == 0) {
                this.$router.push({
                  name: 'examine',
                  query: {
                    totalPrice: this.totalPrice,
                    customerId: this.customerId,
                    receivedMoney: this.receivedMoney,
                    orderId: this.$route.query.orderId,
                    type: this.$route.query.type,
                    totalNumber: this.totalNumber
                  }
                })
              } else {
                this.$message.warning('已收款金额不能为空')
              }
            }
          } else {
            this.$message.warning('地区信息不能为空')
          }
        } else {
          this.$message.warning('申请人信息未填写完整')
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '../../../orderBox/assets/addModifyCommon.scss';

.orderNotes {
  padding: 10px;
  background: #fff;
  margin-bottom: 10px;
}
.div1 {
  margin-left: -16px;
  background: url(../../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

.div3 {
  margin-left: -8px;
  background: url(../../../../assets/breadcrumb3.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.col {
  margin-top: 10px;
}

.selectGoods {
  background: #fff;
  padding: 10px;
}

.header {
  font-size: 16px;
  color: #2d7edf;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.search {
  width: 100%;
  margin: 0 auto;
  margin-top: 5px;
}

/deep/.el-form--inline .el-form-item {
  margin-right: 0px;
  margin-bottom: 15px;
  vertical-align: top;
  margin-right: 5px;
}

.sellPrice {
  /deep/.el-input__inner {
    text-align: center;
    width: 100px;
    height: 30px;
    line-height: 30px;
  }
}

.length {
  /deep/.el-input__inner {
    width: 300px;
    height: 30px;
    line-height: 30px;
  }
}
.basic{
  /deep/.el-input__inner {
  width: 200px;
  height: 30px;
  line-height: 30px;
}
}

/deep/.el-button {
  padding: 8px 14px;
  margin-left: 20px;
}

/deep/.el-table td,
.el-table th.is-leaf {
  text-align: center;
}

/deep/.el-table__row:hover {
  color: #2d7edf;
}

/deep/.el-table th > .cell {
  text-align: center;
  color: #2d7edf;
}

.list {
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.basic {
  background: #fff;
  padding: 10px;
  margin-bottom: 10px;
  /deep/.el-cascader .el-input .el-input__inner {
    width: 400px;
  }
}

.page {
  margin-top: 10px;
  text-align: right;

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
  /deep/.el-select--mini {
    /deep/.el-input__inner {
      width: 100px;
    }
  }
  /deep/.el-pagination__jump {
    /deep/.el-input__inner {
      width: 45px;
    }
  }
}

.specify {
  // margin-top:20px;
  background: #fff;
  padding: 10px;
  position: relative;
  // padding-bottom:50px;
}

.box {
  position: relative;
  .page {
    /deep/.el-input__inner {
      width: 100px;
    }
  }
}

/deep/.el-tabs__header {
  margin-bottom: 0;
}

/deep/.el-tabs__nav-scroll {
  padding-left: 10px;
  overflow: hidden;
  background: #fff;
}

.orderBox {
  position: relative;
  margin-top: 20px;
  padding-bottom: 10px;

  .page1 {
    margin-top: 10px;
    background: #fff;
    padding: 10px;
    text-align: right;

    p {
      display: inline-block;
      vertical-align: middle;
      text-align: center;
    }

    /deep/ .el-input {
      display: inline-block;
      vertical-align: middle;
      width: 130px;
    }

    /deep/ .el-input__inner {
      width: 120px;
      color: #2d7edf;
    }

    span {
      font-size: 14px;
      color: #2d7edf;
      display: inline-block;
      margin-left: 10px;
      vertical-align: middle;
    }
  }
}

.numer {
  /deep/.el-button {
    padding: 5px;
    margin: 0;
    background: #fff;
    border: 1px solid transparent;
    height: 23px;
    font-size: 10px;
    // width:30px;
    border-radius: 0;
  }

  /deep/.el-input-group__prepend {
    padding: 0;
    border-radius: 0;
    border: 1px solid transparent;
  }

  /deep/ .el-input-group {
    width: 80px;
  }

  /deep/.el-input-group__append {
    padding: 0;
    border-radius: 0;
    border: 1px solid transparent;
    // background: #fff;
  }

  /deep/.el-input__inner {
    width: 40px;
    text-align: center;
    padding: 0;
    margin: 0 5px;
    height: 25px;
    line-height: 25px;
  }
}

.orderNotes {
  padding: 10px;
  background: #fff;
  margin-bottom: 10px;
}

.notes {
  p {
    margin-top: 10px;
    display: inline-block;
    margin-right: 10px;
    position: relative;
  }

  span {
    display: block;
    width: 18px;
    height: 18px;
    line-height: 20px;
    text-align: center;
    font-size: 13px;
    color: #fff;
    background: #409eff;
    position: absolute;
    top: -5px;
    right: -6px;
    border-radius: 50%;
  }

  img {
    width: 100px;
    height: 100px;
  }
}

.headerOrder {
  font-size: 16px;
  color: #2d7edf;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.selectTree {
  width: 250px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
/deep/.vue-treeselect {
  height: 28px;
}
/deep/.vue-treeselect--searchable .vue-treeselect__input-container {
  height: 28px;
  line-height: 28px;
  width: 100%;
}
/deep/.vue-treeselect__single-value {
  font-size: 14px;
  line-height: 28px;
}
/deep/.vue-treeselect__menu-container {
  font-size: 15px;
}
/deep/.vue-treeselect__multi-value-item {
  height: 20px;
  line-height: 20px;
  padding: 0;
}
/deep/.vue-treeselect__input {
  height: 26px;
  line-height: 26px;
  outline: none;
  border: none;
  padding: 0;
}
/deep/.vue-treeselect__placeholder {
  font-size: 10px;
  line-height: 28px;
}
/deep/.vue-treeselect--has-value .vue-treeselect__multi-value {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/.vue-treeselect__control {
  height: 28px;
}
.gift {
  display: inline-block;
  text-align: center;
  width: 54px;
  height: 24px;
  background: #feebeb;
  border-radius: 4px;
  margin-left: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #F33F3F;
  line-height: 23px;
  box-sizing: border-box;
}
//表格修改价格
.table-price{
  .retail-price{
    .el-input{
      width: 100px !important;
    }
  }
  p{
    text-align: left;
    line-height: 250%;
  }
}
:deep(.orderBox .el-table th > .cell){
  text-align: center;
}
</style>
